<template>
  <CommonPage>
    <AppCrud
      ref="tableRef"
      :columns="columns"
      default-sort="createdAt"
      v-model:query="query"
      :get-data="userApi.page"
    >
      <query-item label="帐号">
        <a-input
          size="small"
          placeholder="请输入帐号"
          v-model:value="query.username"
          allow-clear
        ></a-input>
      </query-item>

      <query-item label="名称">
        <a-input
          allow-clear
          size="small"
          placeholder="请输入名称"
          v-model:value="query.name"
        ></a-input>
      </query-item>

      <template #action>
        <a-button type="primary" @click="handleAdd">
          <template #icon><PlusOutlined></PlusOutlined></template>
          创建用户
        </a-button>
      </template>
    </AppCrud>

    <AppModal ref="modalRef" width="800px">
      <a-form ref="formRef" :model="formModel" :label-col="{ style: { width: '90px' } }">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="帐号"
              name="username"
              :rules="[{ required: true, message: '此为必填项' }]"
            >
              <a-input placeholder="请输入帐号" v-model:value="formModel.username"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              v-if="modalAction == 'add'"
              label="密码"
              name="password"
              :rules="[{ required: true, message: '此为必填项' }]"
            >
              <a-input-password
                placeholder="请输入密码"
                v-model:value="formModel.password"
              ></a-input-password>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="名称"
              name="name"
              :rules="[{ required: true, message: '此为必填项' }]"
            >
              <a-input placeholder="请输入名称" v-model:value="formModel.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="联系电话">
              <a-input placeholder="请输入联系电话" v-model:value="formModel.mobile"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="角色">
              <a-radio-group v-model:value="formModel.role">
                <a-radio v-for="role in Roles" :value="role.key">{{ role.name }}</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="备注">
              <a-textarea
                placeholder="请输入备注信息"
                v-model:value="formModel.remark"
              ></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </AppModal>
  </CommonPage>
</template>
<script setup lang="ts">
import { AppCrud, AppModal, CommonPage, QueryItem } from '@/components/common'
import { useCrud } from '@/hooks/useCrud.ts'
import userApi, { UserDto } from '@/api/user.ts'
import { Roles } from '@/api/role.ts'
import { Button, Space, Tag } from 'ant-design-vue'

const tableRef = ref()

const query = ref({
  name: null,
  username: null,
})

const columns = [
  {
    title: '帐号',
    dataIndex: 'username',
    width: 200,
  },
  {
    title: '名称',
    dataIndex: 'name',
    width: 200,
  },
  {
    title: '联系电话',
    dataIndex: 'mobile',
    align: 'center',
    width: 200,
  },

  {
    title: '角色',
    dataIndex: 'role',
    align: 'center',
    render: ({ record }: any) => {
      return h(
        Space,
        {},
        {
          default: () => Roles.find((role) => role.key == record.role)?.name,
        },
      )
    },
    width: 120,
  },
  {
    title: '创建时间',
    width: 200,
    dataIndex: 'createdAt',
  },
  {
    title: '操作',
    align: 'center',
    width: 140,
    render: ({ record }: any) => {
      return h(
        Space,
        {},
        {
          default: () => [
            h(
              Button,
              {
                size: 'small',
                type: 'primary',
                onClick: () => {
                  handleEdit(record)
                },
              },
              {
                default: () => '编辑',
              },
            ),
            h(
              Button,
              {
                size: 'small',
                danger: true,
                onClick: () => handleDelete(record.id),
              },
              {
                default: () => '删除',
              },
            ),
          ],
        },
      )
    },
  },
]

const {
  modalRef,
  formRef,
  formModel,
  modalAction,
  handleEdit,
  handleAdd,
  handleSave,
  handleDelete,
} = useCrud<UserDto>({
  name: '用户',
  initForm: {
    username: null,
    admin: false,
    role: 'worker',
  },
  doCreate: userApi.create,
  doUpdate: userApi.update,
  doDelete: userApi.delete,
  doGet: userApi.get,
  refresh: () => tableRef.value?.handleSearch(),
})

onMounted(() => {
  tableRef.value?.handleSearch()
})
</script>

<style scoped></style>
